<template>
    <div class="dial">
        <div class="times">抽奖次数{{ LuckyClick }}</div>
        <!-- 转盘包裹 -->
        <div class="rotate">
            <!-- 绘制圆点 -->
            <div :class="'circle circle_' + index" v-for="(item, index) in circleList" :key="item"
                :style="{ background: index % 2 == 0 ? colorCircleFirst : colorCircleSecond }"></div>
            <!-- 转盘图片 -->
            <img class="dish" src="@/assets/yuanPan.png"
                :style="{ transform: rotate_deg, transition: rotate_transition }" />
            <!-- 指针图片 -->
            <img class="pointer" src="@/assets/zhiZhen.png" @click="start" />
        </div>
    </div>
</template>
<script setup lang="ts">
let light_timer = ref<any>(); //灯光定时器
const LuckyClick = ref(3);
const circleList = ref<any>([]);//原点设置
const colorCircleFirst = ref("#FE4D32"); //圆点颜色
const colorCircleSecond = ref("#fff");//圆点颜色
// const cat = ref(45);//总共8个扇形区域，每个区域约45度
const isAllowClick = ref(true); //是否能够点击
const rotate_deg = ref<string>('0'); //指针旋转的角度
const rotate_transition = ref("transform 3s ease-in-out"); //初始化选中的过度属性控制
/**
 * vue3生命周期
 * */
onMounted(() => {
    showcircleList()
});
//绘制圆点设置
const showcircleList = () => {
    let circleListArr = [];
    for (var i = 0; i < 16; i++) {
        circleListArr.push(i);
    }
    circleList.value = circleListArr;
    light();
}

//闪动效果
const light = () => {
    clearInterval(light_timer.value);
    light_timer.value = setInterval(function () {
        if (colorCircleFirst.value == "#FE4D32") {
            colorCircleFirst.value = "#fff";
            colorCircleSecond.value = "#FE4D32";
        } else {
            colorCircleFirst.value = "#FE4D32";
            colorCircleSecond.value = "#fff";
        }
    }, 300); //设置圆点闪烁的效果
}

const start = () => {
    if (LuckyClick.value == 0) {
        alert("机会已经用完了");
        return;
    }
    rotating();
}

const rotating = () => {
    if (!isAllowClick.value) return;
    isAllowClick.value = false;
    rotate_transition.value = "transform 3s ease-in-out";
    LuckyClick.value--;
    let rand_circle = 5; //默认多旋转5圈
    //   var winningIndex = Math.floor(Math.random() * 8); //获奖的下标   0-7   没有概率每个平均
    let winningIndex: any = set(); //设置了概率的

    console.log(winningIndex);
    let randomDeg = 360 - winningIndex * 45; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度

    let deg = rand_circle * 360 + randomDeg; //将要旋转的度数  由于是顺时针的转动方向需要用360度来减
    rotate_deg.value = "rotate(" + deg + "deg)";

    setTimeout(function () {
        isAllowClick.value = true;
        rotate_deg.value = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
        rotate_transition.value = "";

        if (winningIndex == 0) {
            alert("恭喜您，IphoneX");
        } else if (winningIndex == 1) {
            alert("恭喜您，获得10元现金");
        } else if (winningIndex == 2) {
            alert("很遗憾，重在参与");
        } else if (winningIndex == 3) {
            alert("恭喜您，获得30元现金");
        } else if (winningIndex == 4) {
            alert("恭喜您，获得20元现金");
        } else if (winningIndex == 5) {
            alert("恭喜您，获得50元现金");
        } else if (winningIndex == 6) {
            alert("恭喜您，获得5元现金");
        } else if (winningIndex == 7) {
            alert("恭喜您，获得100元现金");
        }
    }, 3500);
}

//设置概率
const set = () => {
    let winIndex;
    //方法1
    //   if (Math.floor(Math.random() * 100) < 30) {
    //     console.log("30%的概率,重在参与");
    //     winIndex = 2;
    //   } else if (Math.floor(Math.random() * 100) < 55) {
    //     console.log("25%的概率,5元");
    //     winIndex = 6;
    //   } else if (Math.floor(Math.random() * 100) < 75) {
    //     console.log("20%的概率,10元");
    //     winIndex = 1;
    //   } else if (Math.floor(Math.random() * 100) < 85) {
    //     console.log("10%的概率,20元");
    //     winIndex = 4;
    //   } else if (Math.floor(Math.random() * 100) < 92) {
    //     console.log("7%的概率,30元");
    //     winIndex = 3;
    //   } else if (Math.floor(Math.random() * 100) < 97) {
    //     console.log("5%的概率,50元");
    //     winIndex = 5;
    //   } else if (Math.floor(Math.random() * 100) < 99) {
    //     console.log("2%的概率,100元");
    //     winIndex = 7;
    //   } else if (Math.floor(Math.random() * 100) == 99) {
    //     console.log("1%的概率,IphoneX");
    //     winIndex = 0;
    //   }


    //方法2
    let __rand__ = Math.random();
    if (__rand__ < 0.3) winIndex = 2;
    else if (__rand__ < 0.55) winIndex = 6;
    else if (__rand__ < 0.75) winIndex = 1;
    else if (__rand__ < 0.85) winIndex = 4;
    else if (__rand__ < 0.92) winIndex = 3;
    else if (__rand__ < 0.97) winIndex = 5;
    else if (__rand__ < 0.99) winIndex = 7;
    else if (__rand__ == 0.99) winIndex = 0;

    return winIndex;
}
</script>

<style lang="less" scoped>
.times {
    text-align: center;
    line-height: 1;
    background: #fff;
}

.rotate {
    width: 480px;
    height: 480px;
    background: #ffbe04;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rotate .dish {
    width: 480px;
    height: 480px;
}

.pointer {
    width: 100px;
    height: 160px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 圆点 */
.rotate .circle {
    position: absolute;
    display: block;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    background: black;
    z-index: 999999;
}

.rotate .circle_0 {
    top: 0px;
    left: 235px;
}

.rotate .circle_1 {
    top: 18px;
    left: 143px;
}

.rotate .circle_2 {
    top: 67px;
    left: 68px;
}

.rotate .circle_3 {
    top: 145px;
    left: 15px;
}

.rotate .circle_4 {
    top: 233px;
    left: 0px
}

.rotate .circle_5 {
    bottom: 140px;
    left: 17px;
}

.rotate .circle_6 {
    bottom: 71px;
    left: 64px;
}

.rotate .circle_7 {
    bottom: 13px;
    left: 149px;
}

.rotate .circle_8 {
    bottom: 0px;
    right: 235px;
}

.rotate .circle_9 {
    bottom: 20px;
    right: 140px;
}

.rotate .circle_10 {
    bottom: 74px;
    right: 62px;
}

.rotate .circle_11 {
    bottom: 148px;
    right: 13px;
}

.rotate .circle_12 {
    bottom: 239px;
    right: 0px;
}

.rotate .circle_13 {
    top: 141px;
    right: 16px;
}

.rotate .circle_14 {
    top: 64px;
    right: 71px;
}

.rotate .circle_15 {
    top: 13px;
    right: 147px;
}
</style>